<template>
	<view class="fengCode" :style="'width: '+boxWidth+'rpx;'">
		<view class="inputInfo">
			<input  v-for="(v, k) in numberArr" :key="k" 
				ref="numInput"
				:type="inputType"
				:value="v"
				@input="handleInput($event, k)" 
				@click="onFocus(k)"
				:focus="focusArr[k]"
				:class="'inputBox ' + k + (nowNum == k ? ' onFocus' : '')" 
			>
		</view>
		<view  class="valInfo" >
			<view v-for="(v, k) in valArr" :key="k" 
				class="valBox" 
				:style="'width: '+width+'rpx;height:'+height+'rpx;line-height:'+height+'rpx;'" @click="onFocus(k)"
			> 
				{{v}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * @description 宽度 rpx
			 */
			boxWidth: {
				type: Number,
				default: 500,
			},
			width: {
				type: Number,
				default: 44,
			},
			height: {
				type: Number,
				default: 44,
			},
			/**
			 * @description 长度
			 */
			maxlength: {
				type: Number,
				default: 6
			},
			/**
			 * @description text | number 
			 */
			inputType: {
				type: String,
				default: 'number'
			},
		},
		created() {
			for(let i = 0; i < this.$props.maxlength; i++){
				this.numberArr[i] = "";
				this.valArr[i] = "";
				this.focusArr[i] = false;
			}
		},
		data(){
			return {
				numberArr: [],
				valArr: [],
				focusArr: [],
				nowNum: -1,
			}
		},
		methods: {
			handlePaste(data) {
				console.info(data);
				// maxlength="1" 
			},
			onFocus(index) {
				console.info("onFocus = " + index);
				this.numberArr[index] = '';
				this.nowNum = index;
				this.focusArr = this.focusArr.map(() => false);
				this.focusArr[index] = true;
				this.$forceUpdate();
				return true;
			},
			// onInputFocus(index) {
			// 	this.numberArr[index] = '';
			// 	this.nowNum = index;
			// 	console.info(index + "  【"+this.nowNum+" === "+ index + "】           " + (Number(this.nowNum) === Number(index)))
			// 	return Number(this.nowNum) === Number(index);
			// },
			handleInput(event, index) {
				var that = this;
				let value = event.target.value.trim();
				console.info(event);
				// if (event.mp.detail.keyCode === 8 && index > 0) {
				//         // 退格键处理
				//         index = Number(index) - 1;
				// 		that.numberArr[index] = " ";
				// 		that.valArr[index] = " ";
				// 		that.focusArr = that.focusArr.map(() => false);
				// 		that.focusArr[index] = true;
				//   }
				let nowArr = value.split("");
				for (let i = 0; i < nowArr.length; i++) {
					if(nowArr[i] == '') {
						return false;
					}
					that.numberArr[index] = " ";
					that.valArr[index] = nowArr[i];
					index++;
					that.focusArr = that.focusArr.map(() => false);
					that.focusArr[index] = true;
					that.nowNum = Number(index);
					that.$forceUpdate();
					let valLenght = that.valArr.filter(item => item !== '' && item !== null && item !== undefined).length;
					if(valLenght === that.$props.maxlength){
						that.$emit('onComplete', that.valArr);
						return true;
					}
				}
				that.nowNum = Number(index);
				// this.focusInput(index);
				that.$forceUpdate();
			},
			focusInput(index) {
			  this.$nextTick(() => {
				const query = wx.createSelectorQuery().in(this);
				query.select('#numInput').focus({
				  cursor: index,
				  success: () => {
					console.log('Input focused');
				  },
				  fail: (err) => {
					console.error('Failed to focus input', err);
				  }
				}).exec();
			  });
			},
			resetVal() {
				for(let i = 0; i < this.$props.maxlength; i++){
					this.numberArr[i] = "";
					this.valArr[i] = "";
				}
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fengCode {
		position: relative;
	}
	.inputInfo {
		display: flex;
		width: 100%;
	}
	.inputBox {
		color: #3c4868;
		flex: 1;
		border: 2px solid #ccc;
		border-radius: 10rpx;
		font-size: 34rpx;
		margin-right: 10rpx;
		text-align: center;
	}
	.valInfo {
		display: flex;
		position: absolute;
		width: 100%;
		top: 2px;
	}
	.valBox {
		color: #3c4868;
		flex: 1;
		border-radius: 10rpx;
		font-size: 34rpx;
		margin-right: 10rpx;
		text-align: center;
	}
	.onFocus {
		border: 2px solid #ff5500 !important;
		border-width: 2px;
		animation: myfirst 600ms infinite;
		caret-color: transparent;
		z-index: 99;
		@keyframes myfirst
		{
			0%   {opacity: 0.1}
			100% {opacity: 1}
		}
	}
</style>